<template>
  <div class="msbd-index">
    <el-button type="primary" @click="onAddedTest">新增试题</el-button>
    <el-input
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
      v-model="searchIpt"
      style="width: 400px; display: inline-block; float: right"
      @keyup.enter.native="onSearch"
    >
    </el-input>
    <br />
    <el-table :data="msbdList" border style="width: 100%; margin-top: 20px">
      <el-table-column type="index" label="#" width="50"> </el-table-column>
      <el-table-column prop="title" label="标题">
        <template slot-scope="scope">
          <el-link type="primary" @click="onLook(scope.row)">{{
            scope.row.title
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="分类" width="150"> </el-table-column>
      <el-table-column prop="author" label="作者" width="150">
      </el-table-column>
      <el-table-column prop="time" label="用时" width="150"> </el-table-column>
      <el-table-column prop="date" label="发布时间" width="150">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="warning" size="small" @click="onUpdated(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="onDelete(scope.row.id)"
            >删除</el-button
          >
          <el-button type="info" size="small">导出</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  -->
    <el-pagination
      style="margin-top: 20px"
      background
      layout="prev, pager, next"
      :currentPage="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination>
    <!--  -->
    <el-drawer
      :title="'知识点' + title"
      :visible.sync="drawer"
      :direction="'rtl'"
      size="40%"
    >
      <!--  -->

      <el-form ref="form" :model="form" label-width="80px" size="mini">
        <el-form-item label="标题">
          <el-input v-model="form.title" :disabled="lookList"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select
            v-model="form.type"
            placeholder="请选择分类"
            :disabled="lookList"
          >
            <el-option
              v-for="(item, index) in classifyList"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用时">
          <el-select
            v-model="form.time"
            placeholder="请选择用时"
            :disabled="lookList"
          >
            <el-option label="1分" value="1"></el-option>
            <el-option label="2分" value="2"></el-option>
            <el-option label="3分" value="3"></el-option>
            <el-option label="5分" value="5"></el-option>
            <el-option label="10分" value="10"></el-option>
            <el-option label="15分" value="15"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <mavonEditor
            style="max-height: 300px; overflow-y: scroll"
            v-model="form.content"
            :editable="!lookList"
          ></mavonEditor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-show="!lookList" @click="onSubmit">{{
            title
          }}</el-button>
          <el-button @click="onCancel" :disabled="false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      currentPage: 0,
      drawer: false,
      form: {},
      title: "新增",
      lookList: null,
      searchIpt: "",
      pageSize: 10,
    };
  },
  mounted() {
    this.renderDataList();
  },
  methods: {
    ...mapMutations("msbd", []),
    ...mapActions("msbd", [
      "renderMsbdList",
      "addMsbdData",
      "editMsbdData",
      "deleteMsbdData",
    ]),
    renderDataList() {
      this.renderMsbdList();
    },
    onAddedTest() {
      this.title = "新增";
      this.drawer = !this.drawer;
    },
    async onSubmit() {
      let cid = 0,
        type = this.form.type;

      this.classifyList.forEach((v) => {
        v.name == type && (cid = v.id);
      });

      this.form = {
        ...this.form,
        cid,
      };

      if (this.form.id) {
        await this.editMsbdData({ ...this.form });
      } else {
        await this.addMsbdData({ ...this.form });
      }
      this.drawer = false;
      this.form = {};
    },
    onLook(row) {
      this.title = "预览";
      this.lookList = true;
      this.form = row;
      this.drawer = !this.drawer;
    },
    onCancel() {
      this.drawer = false;
      this.form = {};
      this.lookList = null;
    },
    onUpdated(row) {
      this.title = "修改";
      this.form = { ...row, cid: row.type };
      this.drawer = !this.drawer;
    },
    onSearch() {
      this.renderMsbdList({ query: this.searchIpt });
    },
    onDelete(id) {
      this.$confirm("此操作将永久删除试题, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteMsbdData({ id });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      this.renderMsbdList({
        currentPage: e - 1,
        pageSize: this.pageSize,
      });
    },
  },
  computed: {
    ...mapState("msbd", ["msbdList", "classifyList", "total"]),
  },
  components: {
    mavonEditor,
  },
};
</script>

<style scoped>
.msbd-index {
  padding: 20px;
}
</style>